<!-- 玫瑰图 -->
<template>
  <div id="rose-echarts">
    <myCard :title="seriesDataInfo.name">
      <template #default>
        <myEcharts v-bind="seriesDataInfo" :option="options"></myEcharts>
      </template>
    </myCard>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults, computed } from 'vue'

import myEcharts from '..'
import myCard from '@/base-ui/card'

import type { PieEchartsTypes } from '..'

interface PropsTypes {
  seriesDataInfo: PieEchartsTypes
}

const props = withDefaults(defineProps<PropsTypes>(), {})

const options = computed(() => {
  return {
    // legend: {
    //   top: 'bottom'
    // },
    // toolbox: {
    //   show: true,
    //   feature: {
    //     mark: { show: true },
    //     dataView: { show: true, readOnly: false },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [10, 120],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: props.seriesDataInfo.data
      }
    ]
  }
})
</script>

<style scoped lang="less"></style>
